<script setup>
import { onMounted, ref, reactive, toRefs, watch } from "vue";
import { ElMessage } from "element-plus";
import { clone } from "@/utils/util";
const elButton = resolveComponent("el-button");
const columns = [
  {
    name: "index",
    label: "序号",
    width: 100,
    fixed: true,
  },
  {
    name: "date",
    label: "日期",
    sortable: true,
  },
  {
    name: "name",
    label: "名称",
  },
  {
    name: "address",
    label: "地址",
  },
  {
    name: "status",
    label: "状态",
    slotName: "status",
  },
  {
    name: "custom",
    label: "自定义",
    align: "center",
    gendarFomat: (row, column) => {
      return h(
        elButton,
        {
          style: {
            borderRadius: "10px",
          },
          class: "skyblue",
          size: "small",
          onClick: () => {
            console.log(row);
          },
        },
        ["自定义渲染函数"]
      );
    },
  },
  {
    id: 5,
    name: "操作",
    label: "操作",
    slotName: "handler",
  },
];
const query = reactive({
  pageNum: 1,
  pageSize: 10,
  pageSizes: [10, 20, 50, 100],
});
const data = reactive([]);
const tableData = reactive([]);
const loading = ref(false);
for (let index = 0; index < 100; index++) {
  data.push({
    index: index + 1,
    date: "2016-05-03",
    name: "Tom" + index,
    address: "No. 189, Grove St, Los Angeles",
    status: index % 2 === 0,
  });
}

const loadData = ({ pageNum, pageSize }) => {
  loading.value = true;
  setTimeout(() => {
    tableData.push(...clone(data).splice((pageNum - 1) * pageSize, pageSize));
    loading.value = false;
  }, 1000);
};

const changePage = ({ pageNum, pageSize }) => {
  query.pageNum = pageNum;
  query.pageSize = pageSize;
  tableData.length = 0;
  loadData({ pageNum, pageSize });
};
const handleEditClick = (val) => {
  ElMessage({
    message: "编辑成功！",
    type: "success",
  });
};
const deleteBtnClick = (val) => {
  ElMessage({
    message: "删除成功！",
    type: "success",
  });
};
const sendSelection = (val) => {
  console.log(val);
};
onMounted((_) => {
  loadData(query);
});
</script>

<template>
  <div class="lw-table">
    <lwTable
      ref="table"
      :data="tableData"
      :loading="loading"
      :columns="columns"
      :total="data.length"
      :query="query"
      @sendSelection="sendSelection"
      @changePage="changePage"
    >
      <template #status="scope">
        <el-switch
          v-model="scope.row.status"
          size="large"
          inactive-text="状态"
        />
      </template>
      <template #handler="scope">
        <el-button size="small" @click="handleEditClick(scope.row)"
          >编辑</el-button
        >
        <el-button size="small" @click="deleteBtnClick(scope.row)"
          >删除</el-button
        >
      </template>
    </lwTable>
  </div>
</template>

<style scoped lang="less">
:deep(.skyblue) {
  color: skyblue;
  margin: 0 auto;
}
</style>
